<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<t:template>

<script>			
		$(function() {			
			
			$('#viajeList').jqGrid({
				url:'administracion?action=getForGrid&entity=viaje&filterValue='+$('#id').val(),
				datatype: 'json',
				colNames:['Id', 'Id Chofer', 'Pasajero', 'Estado', 'Origen', 'Destino', 'Deslogueado'],
				colModel :[
					{name:'id', index:'id', width:55, hidden:true},
					{name:'idchofer', index:'idchofer', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'pasajero', index:'pasajero', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'estado', index:'estado', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'origen', index:'origen', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'destino', index:'destino', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'estadoChofer', index:'estadoChofer', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }}
				],
				pager: '#viajePager',
				height: 150,
				width: 700,
				rowNum:100,
				rowList:[100,150,200],
				sortname: 'id',
				sortorder: 'desc',
				viewrecords: true,
				gridview: true,
				caption: 'Viajes',
				onSelectRow: function(id) {
					if(id != $('#viajeId').val())
						$('#viajeId').val(id);
				},
				ondblClickRow: function(id){
					if(id) {
						;
	  				}
				}
			});
			
			jQuery('#viajeList').jqGrid('navGrid','#viajePager').jqGrid('navButtonAdd','#viajePager',{	
				caption:'Reasignar', 
				onClickButton:	function () {
					
					var id = $('#viajeId').val();
					if(id) {
	  					$.colorbox({iframe:true, 
							href:'reasignar?entity=viaje&action=ver&id='+id, 
							width:500, 
							height:300, 
							overlayClose:false,
							opacity: 0.2, 
							onClosed: function() {
											jQuery('#viajeList').trigger("reloadGrid");
											jQuery('#autosList').trigger("reloadGrid");
										}
							});
	  				}
// 					alert('reasignar->'+$('#viajeId').val());												
					
				}
			});
			
			jQuery('#viajeList').jqGrid('navGrid','#viajePager').jqGrid('navButtonAdd','#viajePager',{	
				caption:'Cancelar', 
				onClickButton:	function () {

					jQuery.ajax({											
						url: 'administracion?action=cancelarViaje&idviaje='+ $('#viajeId').val(),
						dataType: 'json',
						success: function(data) {

									alert(data);
									
									jQuery('#viajeList').trigger("reloadGrid");
									jQuery('#autosList').trigger("reloadGrid");
								},
						error: function(jqXHR, textStatus, errorThrown) {

									alert('Error: '+textStatus+' '+errorThrown);
								}
					});
					
// 					alert('cancelar->'+$('#viajeId').val());												
				}
			});
			
			$('#autosList').jqGrid({
				url:'administracion?action=autosActivosGrid&filterValue='+$('#id').val(),
				datatype: 'json',
				colNames:['Id', 'Chofer', 'Latitud', 'Longitud', 'Estado'],
				colModel :[
					{name:'id', index:'id', width:55, hidden:true},
					{name:'chofer', index:'chofer', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'lat', index:'lat', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'longi', index:'longi', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
					{name:'estado', index:'estado', width:100 , searchoptions: { sopt: ['eq', 'bw', 'ew'] }},
				],
				pager: '#autosPager',
				height: 150,
				width: 700,
				rowNum:100,
				rowList:[100,150,200],
				sortname: 'id',
				sortorder: 'asc',
				viewrecords: true,
				gridview: true,
				caption: 'Autos activos',
				ondblClickRow: function(id){
					if(id) {
						;
	  				}
				}
			});

// 			autoReloadGrids();
			setInterval(autoReloadGrids, 15000);
		});
		
		var count=0;
		function autoReloadGrids() {
			if(count>0) {
				jQuery('#viajeList').trigger("reloadGrid");
				jQuery('#autosList').trigger("reloadGrid");
			}
			
// 			setInterval(autoReloadGrids, 15000);
			
			count++;
		}
	</script>
	
	<div class="grid_10 alpha omega">
		<table id="viajeList"><tr><td/></tr></table>
		<div id="viajePager"></div>
	</div>
	
	<div class="grid_10 alpha omega">
		<table id="autosList"><tr><td/></tr></table>
		<div id="autosPager"></div>
	</div>
	
	<input type="hidden" id="viajeId"></input>

</t:template>